<template>
	<view>
		<view v-if="loading">
			<loading></loading>
		</view>
		<view v-else class="container">
			<uni-title type="h3" title="考卷列表"></uni-title>
			
			<view class="item-view"   v-for="(item, index) in list" :key="index" @click="toExamination(item)">
				<view class="imgView">
					<image class="image" src="/static/images/list.png" mode="aspectFit"></image>
				</view>
				<view class="center">
					<text>{{item.examinationName}}</text>
					<text>考试日期:{{item.startTime}} — {{item.endTime}}</text>
				</view>
				<view class="right-view">
					<text>开始考试</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="true" type="message" class="popup">
			<view class="popup-body" v-if="examination">
				<view class="popup-view">
					<view class="imgView" v-if="examination.avatarUrl">
						<image :src="examination.avatarUrl"></image>
					</view>
					<view class="textView">
						<view class="title">
							<text>{{examination.examinationName}}</text>
						</view>
						<view class="textBody">
							<text>温馨提示</text>
							<rich-text  :nodes="examination.attention"></rich-text>
						</view>
						
					</view>
					<button size="mini" class="coursebtn" @tap="close">进入考试</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getExamList } from '@/api/exam/activity'
	import {parseTime } from '@/utils/ruoyi'
	import loading from '@/components/loading/loading'
	export default {
		data() {
			return {
				list:[],
				activityId:null,
				loading:true,
				examination:null,
			}
		},
		onLoad() {
			this.activityId = uni.getStorageSync('activityId')
			this.getList()
			uni.removeStorageSync('activeData')
			uni.removeStorageSync('examRecord')
			uni.removeStorageSync('num')
			uni.removeStorageSync('SubjectIds')
		},
		methods: {
			getList(){
				let data = {
					activityId:this.activityId
				}
				getExamList(data).then(res => {
					this.list = res.data
					for (let i = 0; i < this.list.length; i++) {
						this.list[i].startTime = parseTime(this.list[i].startTime,'{m}-{d}')
						this.list[i].endTime = parseTime(this.list[i].endTime,'{m}-{d}')
					}
					this.loading = false
				}).catch(() =>{
					
				})
			},
			toExamination(e){
				this.examination = e
				uni.setStorageSync('examinationId', e.id)
				uni.setStorageSync('examination', e)
				this.open()				
			},
			open() {
				this.$refs['popup'].open('center');
			},
			close() {
				this.$refs.popup.close()
				this.$tab.navigateTo('/pages/exam/mock?type=0')	

			},
		}
	}
</script>

<style lang="scss">
	.container{
		width: calc(100vw - 60rpx);
		margin: 30rpx auto;
		.item-view{
			display: flex;
			margin-top: 20px;
			height: 84px;
			box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
			border-radius: 10rpx;
			overflow: hidden;
			justify-content: space-between;
			background-color: #fff;
			.imgView{
				width: 100rpx;
				overflow: hidden;
				.image{
					width: 20px;
					height: 20px;
					margin: 20px 15px;
				}
			}
			text{
				display: block;
				font-family: Inter-Thin, Inter;
				padding-left: 10rpx;
				line-height: 84px;
			}
			.center{
				width: 450rpx;
				font-size: 28rpx;
				text{
					line-height: 80rpx;
					padding-left: 20px;
					font-family: Inter-Regular, Inter;
				}
			}
			.right-view{
				width: 100px;
				background: #FF9A50;
				color: #fff;
				text-align: center;
				
			}
		}
	}
	.popup-body{
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			.popup-view{
				padding-bottom: 40rpx;
				.imgView{
					overflow: hidden;
					margin: 0 auto;
				}
				.textView{
					line-height: 50rpx;
					padding: 20rpx 40rpx;
					font-size: 24rpx;
					letter-spacing: 1rpx;
					text{
						display:block;
					}
					.title{
						font-size: 14px;
						font-family: Inter-Bold, Inter;
						font-weight: bold;
						text-align: center;
					}
				}
				.coursebtn{
					width: 500rpx;
					height: 100rpx;
					background: #FF9A50;
					border-radius: 20rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					color: #fff;
					margin: 30rpx auto;
					display: block;
				}
			}
		}

</style>